<template>
  <div class="statis-event">
    <h4>事件数量汇总</h4>
    <table class="my-table table table-bordered table-responsive fixed">
      <thead>
        <tr>
          <th>总量</th>
          <th>关闭数量</th>
          <th>结件数量</th>
          <th>开启数量</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{row.total_all}}</td>
          <td>{{row.close_count}}</td>
          <td>{{row.jiejian_count}}</td>
          <td>{{row.open_count}}</td>
        </tr>
      </tbody>
    </table>

    <h4>事件分类汇总</h4>
    <table class="my-table table table-bordered">
      <thead>
      <tr>
        <th>内部处理事件</th>
        <th>客诉</th>
        <th>其他</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>{{row.inn_count}}</td>
        <td>{{row.custormer_count}}</td>
        <td>{{row.other_count}}</td>
      </tr>
      </tbody>
    </table>

    <h4>事件发起部门汇总</h4>
    <table class="my-table table table-bordered">
      <thead>
      <tr>
        <th v-for="depart in row.departs">{{depart.label}}</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td v-for="depart in row.departs">{{row[`depart_${depart.pk}_count`]}}</td>
      </tr>
      </tbody>
    </table>

<div class="flex">
  <div class="lit-margin">
    <h4>产品规格不良率汇总(前10)</h4>
    <table class="my-table table table-bordered">
      <thead>
      <tr>
        <th>规格</th>
        <th>品号</th>
        <th>品名</th>
        <th>不良率</th>
        <th>不良数量</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item_row in row.model_spec_ratio">
        <td>{{item_row.name}}</td>
        <td>{{item_row.model_no}}</td>
        <td>{{item_row.model_name}}</td>
        <td>{{item_row.fail_ratio}}</td>
        <td>{{item_row.fail_count}}</td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="lit-margin">
    <h4>产品规格不良数量汇总(前10)</h4>
    <table class="my-table table table-bordered">
      <thead>
      <tr>
        <th>规格</th>
        <th>品号</th>
        <th>品名</th>
        <th>不良数量</th>
        <th>不良率</th>

      </tr>
      </thead>
      <tbody>
      <tr v-for="item_row in row.model_spec_count">
        <td>{{item_row.name}}</td>
        <td>{{item_row.model_no}}</td>
        <td>{{item_row.model_name}}</td>
        <td>{{item_row.fail_count}}</td>
        <td>{{item_row.fail_ratio}}</td>
      </tr>
      </tbody>
    </table>
  </div>

</div>


<div class="flex">
  <div class="lit-margin">
    <h4>生产批次不良率汇总(前10)</h4>
    <table class="my-table table table-bordered">
      <thead>
      <tr>
<!--        <th>批次</th>-->
        <th>工单号</th>
        <th>品号</th>
        <th>品名</th>
        <th>不良率</th>
        <th>不良数量</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item_row in row.prod_no_ratio">
        <td>{{item_row.name}}</td>
<!--        <td>{{item_row.order_number}}</td>-->
        <td>{{item_row.model_no}}</td>
        <td>{{item_row.model_name}}</td>
        <td>{{item_row.fail_ratio}}</td>
        <td>{{item_row.fail_count}}</td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="lit-margin">
    <h4>生产批次数量汇总(前10)</h4>
    <table class="my-table table table-bordered">
      <thead>
      <tr>
<!--        <th>批次</th>-->
        <th>工单号</th>
        <th>品号</th>
        <th>品名</th>
        <th>不良数量</th>
        <th>不良率</th>

      </tr>
      </thead>
      <tbody>
      <tr v-for="item_row in row.prod_no_count">
        <td>{{item_row.name}}</td>
<!--        <td>{{item_row.order_number}}</td>-->
        <td>{{item_row.model_no}}</td>
        <td>{{item_row.model_name}}</td>
        <td>{{item_row.fail_count}}</td>
        <td>{{item_row.fail_ratio}}</td>
      </tr>
      </tbody>
    </table>
  </div>

<!--  <div class="lit-margin">-->
<!--    <h4>不良内容简述 不良数量汇总(前10)</h4>-->
<!--    <table class="my-table table table-bordered">-->
<!--      <thead>-->
<!--      <tr>-->
<!--        <th>简述</th>-->
<!--        <th>不良率</th>-->
<!--        <th>不良数量</th>-->
<!--      </tr>-->
<!--      </thead>-->
<!--      <tbody>-->
<!--      <tr v-for="item_row in row.abstract_count">-->
<!--        <td>{{item_row.name}}</td>-->
<!--        <td>{{item_row.order_number}}</td>-->
<!--        <td>{{item_row.model_no}}</td>-->
<!--      </tr>-->
<!--      </tbody>-->
<!--    </table>-->
<!--  </div>-->

</div>



  </div>
</template>
<script>
export  default  {
  data(){
    return {
      parStore:ex.vueParStore(this),
    }
  },
  computed:{
    row(){
      return this.parStore.rows[0]
    }
  }
}
</script>
<style scoped lang="scss">
.my-table{
  width: auto;
  td{
    padding: 5px 20px;
  }
}
.statis-event{
  padding: 0 30px;
}
th{
  background-color: #E4E4E4;
  font-weight: normal;
  padding: 5px 20px !important;
}
.lit-margin{
  margin-right: 40px;
}
h4{
  color: gray;
  margin: 40px 0 20px 0;
}
table, th, td {
  border: 1px solid  #D7D7D7 !important;//;
}
</style>